import { SetStateAction, useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import { Divider ,Space} from 'antd'

const contacts = [
    { name: 'Taylor', email: 'taylor@mail.com' },
    { name: 'Alice', email: 'alice@mail.com' },
    { name: 'Bob', email: 'bob@mail.com' }
];

const View: React.FC = () => {
    const [to, setTo] = useState(contacts[0]);
    return (
        <>
            <Divider orientation="left">父子传值</Divider>
            <Space>
                <ContactList
                    contacts={contacts}
                    selectedContact={to}
                    onSelect={(contact: SetStateAction<{ name: string; email: string; }>) => setTo(contact)}
                />
                <Chat contact={to} />
            </Space>
        </>
    )
}

export default View